<template>
  <BlueBackground :title="'我的地址'">
    <div>
      <van-address-list
        v-model="chosenAddressId"
        :list="addressList"
        default-tag-text="默认"
        @add="methods.onAdd"
        @edit="methods.onEdit"
      />
      <van-empty v-if="addressList.length === 0" description="当前没有地址" />
    </div>
  </BlueBackground>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import BlueBackground from '@/components/BlueBackground.vue'
import { GET } from '@/api'
import { onMounted, ref } from 'vue'
import { AddressListAddress } from 'vant'

const router = useRouter()

const chosenAddressId = ref('1')
const addressList = ref<AddressListAddress[]>([])

const methods = {
  onAdd() {
    router.push({ name: 'NewAddress' })
  },
  onEdit(item: AddressListAddress) {
    // router.push({ name: 'EditAddress', query: { aid: item.aid } })
    router.push({ name: 'EditAddress', query: { id: item.id } })
  },
  getAddress() {
    GET({
      url: '/address/list',
      params: {}
    })
      .then((res) => {
        // addressList = res.data.result;
        const resData = res.data.list
        resData.forEach((item) => {
          addressList.value.push({
            // id: v.id,
            id: item.id,
            name: item.user_name,
            tel: item.phone,
            address:
              item.province === item.city
                ? `${item.province}${item.district}${item.detail_address}`
                : `${item.province}${item.city}${item.district}${item.detail_address}`,
            isDefault: item.is_default === 1 ? true : false
            // aid: item.aid
          })
        })
      })
      .catch((err) => {
        console.error(err)
      })
  }
}

onMounted(() => {
  methods.getAddress()
})
</script>

<style lang="less" scoped>
.bottom-box {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 10px 5%;
  background: #fff;
}
:deep(.van-button--large) {
  width: 90%;
}
:deep(.van-button--danger) {
  background-color: rgb(12, 52, 186);
  border: 1px solid rgb(12, 52, 186);
}
:deep(.van-radio__icon) {
  display: none;
}
:deep(.van-tag--danger) {
  background-color: rgb(12, 52, 186);
}
</style>
